import React from "react";
import { observer, inject } from "mobx-react";
import { Button, Input, Icon, Row, Col, Checkbox, Modal, Radio, AutoComplete, Pagination } from "antd";
import MoreDetail from "../moredetail";
import Filter from "./Filter";

// const SELECT_LIST = [
//     {
//         key: "type",
//         width: 150,
//         placeholder: "请选择",
//         options: [
//             { key: "warning", text: "只看有预警" },
//             { key: "order", text: "只看有指令" },
//             { key: "relatedapp", text: "只看有APP关联" }
//         ]
//     },
//     {
//         key: "area",
//         placeholder: "按区域分类",
//         options: [
//             { key: "all", text: "全部(默认)" },
//             { key: "area1", text: "区域1" },
//             { key: "area2", text: "区域2" },
//             { key: "area3", text: "区域3" }
//         ]
//     },
//     {
//         key: "warning",
//         placeholder: "预警级别",
//         options: [
//             { key: "A1", text: "A1" },
//             { key: "A2", text: "A2" },
//             { key: "A3", text: "A3" },
//             { key: "A4", text: "A4" },
//             { key: "B1", text: "B1" },
//             { key: "B2", text: "B2" },
//             { key: "B3", text: "B3" },
//             { key: "B4", text: "B4" }
//         ]
//     }
// ];

const APP_ROW_LIST = [
    { name: "风险评分", key: "score" },
    { name: "开发公司", key: "company", showTitle: true },
    { name: "适用人群", key: "crowd" },
    { name: "管控等级", key: "level", color: true }
];

const PEOPLE_ROW_LIST = [
    { name: "手机", key: "sj" },
    { name: "身份证", key: "sfzh" },
    { name: "关联APP数", key: "count" },
    { name: "管控等级", key: "level", color: true }
];

const LEVEL_LIST = [
    { key: "B4", color: "#49bf9b" },
    { key: "B3", color: "#49bf9b" },
    { key: "B2", color: "#49bf9b" },
    { key: "B1", color: "#49bf9b" },
    { key: "A4", color: "#ff9543" },
    { key: "A3", color: "#ff9543" },
    { key: "A2", color: "#ff9543" },
    { key: "A1", color: "#ff5858" }
];

@inject("SideRightStore")
@observer
class MainRight extends React.Component {
    state = {
        selectedOrders: [1, 3]
    };
    componentDidMount() {
        this.props.SideRightStore.init(this.props.type);
    }

    handleChange = (value, key) => {
        const temp = {};
        temp[key] = value;
        this.props.SideRightStore.setFilterData(temp);
    };

    onChangeDate = (value, dateString) => {
        console.log(value, dateString);
        this.handleChange(dateString, "filterTime");
    };

    onOk = (value, dateString) => {
        console.log(value, dateString);
    };

    onChangeCheck = (e, id) => {
        this.props.SideRightStore.activeCards(id, e.target.checked);
    };

    setShowModal = (type, item) => {
        const { status } = this.props.SideRightStore;
        switch (type) {
            case "warning":
                status.showModalType = type;
                status.moreDetailStatus = true;
                break;
            case "order":
                status.showModalType = type;
                status.moreDetailStatus = true;
                break;
            case "moreDetail":
                status.moreDetailStatus = true;
                break;
            case "orderSend":
                status.orderSendStatus = true;
                break;
            default:
                break;
        }
        // 打开弹窗，记录当前选中卡片
        this.props.SideRightStore.updateStatus(status);
        this.props.SideRightStore.selectCard(item);
    };

    closeModal = type => {
        const { status } = this.props.SideRightStore;
        switch (type) {
            case "warning":
                status.warningStatus = false;
                break;
            case "order":
                status.orderStatus = false;
                break;
            case "moreDetail":
                status.moreDetailStatus = false;
                break;
            case "orderSend":
                status.orderSendStatus = false;
                break;
            default:
                break;
        }
        this.props.SideRightStore.updateStatus(status);
    };

    onChangeRadio = e => {
        console.log("radio checked", e.target.value);
        this.setState({
            value: e.target.value
        });
    };

    updateSelOreders = value => {
        const { selectedOrders } = this.state;
        const index = selectedOrders.indexOf(value);
        if (index > -1) {
            selectedOrders.splice(index, 1);
        } else {
            selectedOrders.push(value);
        }
        this.setState({
            selectedOrders
        });
    };

    changePage = (page, pageSize) => {
        this.props.SideRightStore.changePage({
            current: page,
            pageSize
        });
    };

    openTagModal = (type, item) => {
        this.setShowModal(type, item);
    };

    getCurRow = data => {
        const { type } = this.props;
        const rowlist = type === "People" ? PEOPLE_ROW_LIST : APP_ROW_LIST;
        const color =
            LEVEL_LIST.filter(item => item.key === data.level).length &&
            LEVEL_LIST.filter(item => item.key === data.level)[0].color;
        return rowlist.map(item => (
            <Row key={`row-${item.key}`} gutter={10} className="app-detail-row">
                <Col span={10} className="col-left">
                    <label>{item.name}</label>
                </Col>
                <Col
                    span={14}
                    title={item.showTitle ? data[item.key] : ""}
                    className="col-right"
                    style={{ color: item.color && color }}
                >
                    <span>{data[item.key]}</span>
                </Col>
            </Row>
        ));
    };

    render() {
        const { listData, page, overCards, status, curCard } = this.props.SideRightStore;
        const { selectedOrders } = this.state;
        return (
            <div className="PMW-content">
                <h2 className="PMW-content-title">管控列表</h2>
                <div className="PMW-content-filter">
                    <Filter />
                </div>
                <div className="PMW-content-list">
                    {listData &&
                        listData.map(item => (
                            <div
                                key={`card-${item.id}`}
                                className={`app-card ${(item.active || overCards === item.id) && "active"}`}
                                onMouseEnter={() => this.props.SideRightStore.mouseOverCard(item.id)}
                                onMouseLeave={() => this.props.SideRightStore.mouseOverCard(item.id, true)}
                            >
                                <div className="badge">
                                    {!!item.warning && (
                                        <div
                                            className="badge-warning"
                                            onClick={() => this.setShowModal("warning", item)}
                                        >
                                            <i className="light" />
                                            <span>20</span>
                                        </div>
                                    )}
                                    {!!item.order && (
                                        <div className="badge-order" onClick={() => this.setShowModal("order", item)}>
                                            <i className="label" />
                                            <span>20</span>
                                        </div>
                                    )}
                                </div>
                                {(item.active || overCards === item.id) && (
                                    <Checkbox
                                        style={{ position: "absolute", top: 15, right: 15 }}
                                        onChange={e => this.onChangeCheck(e, item.id)}
                                        checked={item.active}
                                    />
                                )}
                                <div className="app-header">
                                    <div className="app-header-bg">
                                        <img className="app-header-photo" src={item.logo} alt="头像" />
                                        <span className="app-header-name">{item.name}</span>
                                    </div>
                                </div>
                                <div className="app-detail">{this.getCurRow(item)}</div>
                                <div className="app-footer">
                                    <Button
                                        style={{ marginRight: 15 }}
                                        ghost
                                        onClick={() => this.setShowModal("orderSend", item)}
                                    >
                                        下达指令
                                    </Button>
                                    <Button ghost onClick={() => this.setShowModal("moreDetail", item)}>
                                        更多详情
                                    </Button>
                                </div>
                            </div>
                        ))}
                </div>
                <div className="PMW-content-footer">
                    <Pagination
                        defaultcurrent={page.current}
                        total={page.total}
                        onChange={(page, pageSize) => this.changePage(page, pageSize)}
                    />
                </div>

                {/** 更多详情 */}
                {status.moreDetailStatus && (
                    <MoreDetail data={curCard} onOk={this.setControlLevel} onCancel={this.closeModal} />
                )}

                {/** 指令下达 */}
                <Modal
                    visible={status.orderSendStatus}
                    className="dayu-dialog"
                    title="指令下达"
                    cancelText="取消"
                    okText="确认"
                    onOk={this.setControlLevel}
                    onCancel={() => this.closeModal("orderSend")}
                >
                    <div className="modal-line">
                        <div className="modal-item">
                            <span>目标</span>
                        </div>
                        <p className="modal-text">{curCard && curCard.name}</p>
                    </div>
                    <div className="modal-line">
                        <div className="modal-item">
                            <span>紧急程度</span>
                        </div>
                        <div className="modal-text">
                            <Radio.Group onChange={this.onChangeRadio} value={this.state.value}>
                                <Radio value={1}>普通</Radio>
                                <Radio value={2}>紧急</Radio>
                            </Radio.Group>
                        </div>
                    </div>
                    <div className="modal-line">
                        <div className="modal-item">
                            <span>指令下达对象</span>
                        </div>
                        <div className="modal-text">
                            <AutoComplete
                                className="certain-category-search"
                                dropdownClassName="certain-category-search-dropdown"
                                dropdownMatchSelectWidth={false}
                                dropdownStyle={{ width: 300 }}
                                size="large"
                                style={{ width: "100%" }}
                                // dataSource={options}
                                placeholder="搜索民警团体\团体\公安局"
                                optionLabelProp="value"
                                onSearch={e => console.log("搜索补全时调用", e)}
                                onSelect={e => console.log("被选中时调用", e)}
                                onChange={e => console.log("选中 option，或 input 的 value 变化时，调用此函数", e)}
                            >
                                <Input
                                    suffix={
                                        <span onClick={e => console.log("点击搜索", e)} style={{ color: "#4bb7ff" }}>
                                            <Icon type="search" className="certain-category-icon" />
                                            搜索
                                        </span>
                                    }
                                />
                            </AutoComplete>
                        </div>
                    </div>
                    <div className="modal-line">
                        <div className="modal-item">
                            <span>标准指令</span>
                        </div>
                        <div className="modal-text">
                            <Radio
                                value={1}
                                checked={selectedOrders.indexOf(1) > -1}
                                onClick={() => this.updateSelOreders(1)}
                            >
                                掌握其出行情况
                            </Radio>
                            <Radio
                                value={2}
                                checked={selectedOrders.indexOf(2) > -1}
                                onClick={() => this.updateSelOreders(2)}
                            >
                                核查其上网内容
                            </Radio>
                            <Radio
                                value={3}
                                checked={selectedOrders.indexOf(3) > -1}
                                onClick={() => this.updateSelOreders(3)}
                            >
                                进行教育谈话
                            </Radio>
                        </div>
                    </div>
                </Modal>
            </div>
        );
    }
}

export default MainRight;
